<style lang="stylus">
body
  app-region no-drag
  overflow hidden
</style>

<style lang="stylus" scoped>
@import '../styl/area.styl'

p>div
  display flex
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0, 0, 0, 0.8)
  flex-direction column
  align-items center
  justify-content center

  &>
    h2
      position sticky
      top 0
      width 100%
      text-align center
      color #fff
      padding 0 1rem 1rem
      margin 0

    main
      width 100%
      max-height calc(100vh - 59px)
      top 0

      &>div
        &>div
          &>
            main
              flex-flow row wrap
              padding-bottom 2rem
              width 100%

              li
                cursor pointer
                width 25%
                height auto
                aspect-ratio 16/9
                color #fff
                list-style none
                display flex
                justify-content center
                flex-direction column
                align-items center
                padding 1rem

                &>b
                  overflow hidden
                  flex-shrink 0
                  height 1.5rem
                  text-align center
                  text-overflow ellipsis
                  white-space nowrap
                  width 100%

                &>img
                  margin-bottom 1rem
                  max-width 100%

nav
  bottom 76px

h2>button
  &:last-child
    display inline-block
    background transparent
    color #fff
    border-radius 28px
    font-size 26px
    border-width 2px
    vertical-align 0
    margin-left 32px
    height 29px
    padding 1px 0 0
</style>

<template lang="pug">
div(v-if="wait")
  template(v-if="li")
    template(v-if="li.length")
      h2
        | 请选择窗口
        btn(@click.prevent="cancel") ×
      scrollbar
        main
          li(@click="run(pos)" v-for="(i, pos) in li")
            img(:src="i[0]")
            b {{ i[1] }}
    h2(v-else) 没有可以录制的窗口
      btn(@click.prevent="cancel") ×
i(:style="{ width: `${w}px`, height: `${h}px`, left: `${x}px`, top: `${y}px` }" v-else)
  b
    nav(v-if="go")
      btn(@click.prevent="start" v-if="li") 开始录制
      btn(@click.prevent="cancel") ×
</template>

<script lang="coffee">

import ipc from '~/lib/ipc.coffee'
import ON from '~/lib/broadcast/on.coffee'
import btn from '~/vue/btn.vue'
import '@rmw/vue3-drag/drag.css'
import scrollbar from '~/vue/scrollbar.vue'

export default {
components: {
  btn
  scrollbar
}
setup:=>
  {body} = document
  {clientHeight,clientWidth} = body
  bh = innerHeight*2
  bw = innerWidth*2
  space = 96
  h = Math.min 546,clientHeight-space
  w = Math.min h*1.57,clientWidth-space
  x = (clientWidth - w) / 2
  y = (clientHeight - h) / 2

  {cancel,win_source} = ipc.recbar

  li = shallowRef 0

  do =>
    li.value = await win_source()
    return

  wait = ref true
  go = ref true
  h = ref h
  w = ref w
  x = ref x
  y = ref y
  return {
    li
    h
    w
    x
    y
    go
    wait
    run:(now)=>
      nowli = li.value[now]
      id = nowli[2]
      [x.value,y.value,w.value,h.value] = nowli[3..]
      localStorage.area = JSON.stringify [
        x.value
        y.value
        w.value
        h.value
      ].map(Math.round)
      wait.value = false
      await ipc.wintop(id)
      return
    start:=>
      go.value = false
      await ipc.area()
      return
    move:({offsetLeft, offsetTop},_x,_y)=>
      x.value = offsetLeft+_x
      y.value = offsetTop+_y
      return
    cancel
  }
}
</script>
